import React, { useState, useEffect, useRef } from "react";
import Sider from "./components/Sider";
import Content from "./components/Content";
import Style from "./index.module.less";
import { queryWarehouseList } from "./service";

const ScanEnterWarehouse = () => {
	// 页面数据
	const [data, setData] = useState({
		productInboundOrderDetailsList: []
	});
	const [warehouseList, setWarehouseList] = useState([]); //仓库下拉列表
	// 扫描商品自动展示大图
	const [isShowImg, setIsShowImg] = useState(true);
	const [imgUrl, setImgUrl] = useState();
	// 是否关闭图片框
	const [imgVisible, setImgVisible] = useState(false);
	// 播报扫描商品数量
	const [isBroadcastScanQuantity, setIsBroadcastScanQuantity] = useState();

	//获取仓库列表
	const getWarehouseList = async () => {
		const { data, success } = await queryWarehouseList({
			state: 0
		});
		if (success) {
			// 组合仓库数据
			const list = [
				{ label: "发货仓", options: [], kind: 1 },
				{ label: "次品仓", options: [], kind: 2 },
				{ label: "销退仓", options: [], kind: 3 }
			];
			(data || []).forEach(item => {
				const ind = list.findIndex(e => e.kind === item.kind);
				list[ind].options.push({
					...item,
					value: item.id,
					label: item.warehouseName
				});
			});
			setWarehouseList(list);
		}
	};

	useEffect(() => {
		getWarehouseList();
	}, []);

	const PageProps = {
		data,
		setData,
		warehouseList,
		imgUrl,
		setImgUrl,
		imgVisible,
		setImgVisible,
		isShowImg,
		setIsShowImg,
		isBroadcastScanQuantity,
		setIsBroadcastScanQuantity
	};
	return (
		<div className={Style.container + " ScanEnterWarehouse"}>
			<div className={Style.sider + " " + Style.card}>
				<Sider {...PageProps} />
			</div>
			<div className={Style.content + " " + Style.card}>
				<Content {...PageProps} />
			</div>
		</div>
	);
};
export default React.memo(ScanEnterWarehouse, () => {
	return true;
});
